<style scoped>
    .wraper {
        padding: 0 20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }


    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }




    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }


    /* 表格样式 start*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 10px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }






    /* 表格样式  end */

    /* 分页 start */

    .page {
        margin: 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }







    /* 分页 end */
</style>
<style>
    .a-link {
        color: #4074e1;
        text-decoration: underline;
        cursor: pointer;
    }
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                        <Form-item>
                            <Input size="large" type="text" v-model="searchForm.order_id" placeholder="请输入订单号" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                        <Form-item>
                            <Input size="large" type="text" v-model="searchForm.club" placeholder="请输入俱乐部名称" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="6">
                        <Form-item>
                            <Input size="large" type="text" v-model="searchForm.name" placeholder="请输入投保人" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                        <Form-item>
                            <Input size="large" type="text" v-model="searchForm.policy_name" placeholder="请输入险种名称" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8">
                        <Form-item>
                            <DatePicker :value="searchForm.insured_date" @on-change="contractchange" transfer format="yyyy-MM-dd" type="daterange" placement="bottom-end"
                                placeholder="请选择投保日期"></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8">
                        <Button size="large" style="width:110px" class="fr" type="info" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                        <div class="clear"></div>
                    </Form>
                    <Col span="24" class="table-action">
                    <!-- <Button type="success" size="large" v-if="$isShow('employee/create_office')" class="fr" icon="plus" @click="createBtn">新增</Button> -->

                    <div style="border-right: 1px solid #EDF2F6;" class="fr">
                        <Button type="warning" size="large" class="fr" icon="icon iconfont icon-daochu" @click="exportClick">导出报表</Button>
                    </div>
                    </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                            highlight-row border :columns="columns1" :data="tablelist" class=""></Table>
                    </div>
                </div>
            </div>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :md="24" :lg="12">
                <!-- <Button type="error"  :disabled="tableaction" @click="tableDel" size="large" class="fl mr10 ">删除</Button> -->
                <Button type="primary" :disabled="tableaction" @click="tableEdit" size="large" class="fl mr10">查看</Button>
                <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" @click="modalTrue">设置账号</Button> -->
                </Col>
                <Col :md="24" :lg="12" class="tRight">

                <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange"
                    @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>

    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        export_hc_policy,
        hc_policy
    } from '../../api/tra.js'
    export default {
        data() {
            return {
                tableaction: true,
                exportModal: false,
                readonly: true, //org.phone  弹出框
                showAddModal: false, //点击设置,弹出模态框
                closeable: false, //shif按ese按钮退出
                loading: true, //模态框家在状态提交确定
                closeable: false,
                // loading: true,
                remoteloading: false,
                page: 1,
                pagesize: 10,
                listTotal: 0,
                searchForm: {
                    p: 1,
                    pagesize: 10,
                    order_id: '', //订单号码
                    club: '', //俱乐部
                    name: '', //投保人
                    policy_name: '', //险种名称
                    insured_date: ['', ''], //投保日期
                    start_date: "",
                    end_date: ""
                },
                oname: '',
                deptlist: {},
                ranklist: {},
                orglist: [],
                proloading: false,
                comoptions: [],
                tableloading: false,
                tableaction: true,
                current: 0,
                currentpage: 1,
                currentRow: {},
                columns1: [{
                        title: '订单号',
                        key: "order_id",
                        align: 'center',
                    },
                    {
                        title: '俱乐部',
                        key: 'club',
                        align: 'center',
                    },
                    {
                        title: '投保人',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '险种名称',
                        key: 'policy_name',
                        align: 'center',
                    },
                    {
                        title: '总人数',
                        key: 'total_insured',
                        align: 'center',
                    },
                    {
                        title: '总保费(元)',
                        key: 'total_premium',
                        align: 'center'
                    },
                    {
                        title: '投保日期',
                        key: 'insured_date',
                        align: 'center'
                    },
                ],
                tablelist: [

                ],
                org: {
                    phone: '', //手机号
                    pwd: '', //密码
                    pwd_two: '',
                },
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
        },
        created() {
            this.getList();
        },
        mounted() {},
        methods: {
            // 编辑
            tableEdit() {
                console.log(this.currentRow.id,"id")
                this.$router.push({name:'tradetail',params:{ id: this.currentRow.id }})
            },
            // 获取单行数据
            tableCurrentChange(currentRow, oldCurrentRow) {
                this.tableaction = false;
                this.currentRow = currentRow
                console.log(this.currentRow, "....")
            },
            // 页码改变
            pageChange(page) {
                this.page = page
                this.searchForm.p = page
                this.getList()
            },
            // 每页条数改变
            pageSizeChange(pagesize) {
                this.pagesize = pagesize
                this.searchForm.pagesize = pagesize
                this.getList();
            },
            contractchange(value) {
                console.log(value)
                this.searchForm.start_date = value[0]
                this.searchForm.end_date = value[1]
            },
            // 搜索
            search() {
                this.page = 1
                this.searchForm.p = 1
                this.getList();
            },
            // 获取承保单列表
            getList() {
                // this.tableloading = true;    
                // this.tableaction = true      
                new Promise((resolve, reject) => {
                    hc_policy(this.searchForm).then(response => {
                        console.log(response.data, "11")
                        if (response.data.err == 0) {

                            this.tablelist = response.data.data.list;
                            this.listTotal = response.data.data.total;
                            // this.tableloading = false
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },


            exportClick() {
                //打开一个不被拦截的新窗口
                new Promise((resolve, reject) => {
                    export_hc_policy(this.searchForm).then(response => {
                        if (response.data.err == 0) {
                            var iframe = document.createElement('iframe');
                            iframe.style.display = 'none';
                            console.log(response.data.data.url, '')
                            iframe.src = response.data.data.url;
                            document.body.appendChild(iframe);
                            // window.open(response.data.data.url)
                        } else {
                            this.$Message.error(response.data.info)
                        }
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                        resolve();
                    }).catch(error => {
                        reject(error);
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                    })
                })

                // var _exprot_arry = '';
                // if(this.exportForm.yun_org_mid.length > 0){
                //     _exprot_arry = this.exportForm.yun_org_mid.join("_")
                // }
                // console.log(_exprot_arry)
                // window.open('http://192.168.0.88:8080/batch_export/export_policy?settlement_date='+this.exportForm.settlement_date+'&&status='+this.exportForm.status+'&&start_date='+this.exportForm.start_date+'&end_date='+this.exportForm.end_date+'&yun_id='+this.get_yun_id+'&yun_org_mid='+_exprot_arry)

                //window.open('http://192.168.0.88:8080/batch_export/export_policy?start_date='+this.exportForm.start_date+'&end_date='+this.exportForm.end_date+'&yun_id='+this.get_yun_id+'&yun_org_mid='+_exprot_arry)
            },
        }
    }
</script>